<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>使用Canvas绘制直线</title>
</head>
<body>
	<canvas id="mycanvas" width="600" height="250" style="border:1px solid black"></canvas>
	
	<script type="text/javascript">
		// 通过ID获取DOM中canvas元素
		var myCanvas = document.getElementById("mycanvas");
		// 使用画布对象的getContext()方法声明一个2D上下文
		var cxt = myCanvas.getContext("2d");
		
		//开始设置线条的颜色和宽度
		cxt.lineWidth = 10;
		cxt.strokeStyle = "#ff0000";
		cxt.lineCap = "round";
		cxt.moveTo(10, 10);
		cxt.lineTo(myCanvas.width - 50, 50);
		cxt.lineTo(myCanvas.width - 50, mycanvas.height - 100);
		cxt.lineTo(10,mycanvas.height - 10);
		cxt.stroke();
	</script>
</body>
</html>